<template>
    <div class="form-container">
        <el-row class="row">
            <el-radio-group v-model="calcMode" @change="changeCalcMode">
                <el-radio label="0">按利率计算</el-radio>
                <el-radio label="1">按每十万计算</el-radio>
            </el-radio-group>
        </el-row>
        <div class="mian">
            <!-- 左边 -->
            <div class="block">
                <!-- 按利率 -->
                <el-form ref="form" :model="byRate" label-width="140px" size="small" v-if="calcMode == '0'" :rules="byRateRules">
                    <el-form-item label="票面金额" prop="denomination">
                        <el-col :span="16" class="parent_block">
                            <el-input type="number" v-model="byRate.denomination" placeholder="请输入票面金额"></el-input>
                            <span class="company">万元</span>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="利率" prop="interest_year">
                        <el-col :span="7">
                            <el-select v-model="byRate.interest_type" @change="changeRate(byRate.interest_type)">
                                <el-option label="年利率" value="year"></el-option>
                                <el-option label="月利率" value="month"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="8" :offset="1" v-if="byRate.interest_type == 'year'" class="parent_block">
                            <el-input type="number" v-model="byRate.interest_year" placeholder="请输入利率"></el-input>
                            <span class="company">%</span>
                        </el-col>
                        <el-col :span="8" :offset="1" v-if="byRate.interest_type == 'month'" class="parent_block">
                            <el-input type="number" v-model="byRate.interest_month" placeholder="请输入利率"></el-input>
                            <span class="company">‰</span>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="贴现日" prop="start_time">
                        <el-col :span="16" class="parent_block">
                            <el-date-picker
                                v-model="byRate.start_time"
                                type="date"
                                placeholder="请选择日期"
                                class="full-width"
                                @change="changeDiscountDay"
                            >
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="到期日" prop="end_time">
                        <el-col :span="16" class="parent_block">
                            <el-date-picker
                                v-model="byRate.end_time"
                                type="date"
                                placeholder="请选择日期"
                                :picker-options="pickerOptions"
                                class="full-width"
                                @change="changeExpireDay"
                            >
                            </el-date-picker>
                            <el-row class="hpx-red-tips">
                                {{byRate.holidayModel.orgescription}}
                            </el-row>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="票据类型">
                        <el-col :span="16">
                            <el-select v-model="byRate.bill_type" class="full-width" @change="changeType(byRate.bill_type)">
                                <el-option label="电票" value="101"></el-option>
                                <el-option label="纸票" value="102"></el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="手续费(每10万加)">
                        <el-col :span="16" class="parent_block">
                            <el-input type="number" v-model="byRate.every_plus" placeholder="请输入"></el-input>
                            <span class="company">元</span>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="查询及划款费">
                        <el-col :span="16" class="parent_block">
                            <el-input type="number" v-model="byRate.commission" placeholder="请输入"></el-input>
                            <span class="company">元</span>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="调整天数">
                        <el-col :span="16" class="parent_block">
                            <el-input type="number" v-model="old_adjustDay.byRate" placeholder="请输入"></el-input>
                            <span class="company">天</span>
                        </el-col>
                    </el-form-item>
                </el-form>
                <!-- 按每十万 -->
                <el-form ref="form" :model="byTen" label-width="140px" size="small" v-if="calcMode == '1'" :rules="byTenRules">
                    <el-form-item label="票面金额" prop="denomination">
                        <el-col :span="16" class="parent_block">
                            <el-input type="number" v-model="byTen.denomination" placeholder="请输入票面金额"></el-input>
                            <span class="company">万元</span>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="每十万贴息" prop="every_plus">
                        <el-col :span="16" class="parent_block">
                            <el-input type="number" v-model="byTen.every_plus" placeholder="请输入每十万贴息"></el-input>
                            <span class="company">元</span>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="贴现日">
                        <el-col :span="16">
                            <el-date-picker
                                v-model="byTen.start_time"
                                type="date"
                                placeholder="选择日期"
                                class="full-width"
                                @change="changeDiscountDay"
                            >
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="到期日">
                        <el-col :span="16">
                            <el-date-picker
                                v-model="byTen.end_time"
                                type="date"
                                placeholder="选择日期"
                                :picker-options="pickerOptionsTen"
                                class="full-width"
                                @change="changeExpireDay"
                            >
                            </el-date-picker>
                            <el-row class="hpx-red-tips">
                                {{byTen.holidayModel.orgescription}}
                            </el-row>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="票据类型">
                        <el-col :span="16">
                            <el-select v-model="byTen.bill_type" class="full-width" @change="changeType(byTen.bill_type)">
                                <el-option label="电票" value="101"></el-option>
                                <el-option label="纸票" value="102"></el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="调整天数">
                        <el-col :span="16" class="parent_block">
                            <el-input type="number" v-model="old_adjustDay.byTen" placeholder="请输入"></el-input>
                            <span class="company">天</span>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 右边 -->
            <div class="block calc_result">
                <el-row class="result_title"><span>计算结果</span></el-row>
                <div class="result_content">
                    <!-- 按利率 -->
                    <el-form label-width="160px" size="small" v-if="calcMode == '0'">
                        <el-form-item label="计息天数">
                            <el-col :span="16" class="parent_block">
                                <el-input v-model="calcResult.day" readonly></el-input>
                                <span class="company">天</span>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="每十万贴息">
                            <el-col :span="16" class="parent_block">
                                <el-input v-model="result.every_plus_amount" readonly></el-input>
                                <span class="company">元</span>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="贴现利息">
                            <el-col :span="16" class="parent_block">
                                <el-input v-model="result.discount_interest" readonly></el-input>
                                <span class="company">元</span>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="贴现金额">
                            <el-col :span="16" class="parent_block">
                                <el-input v-model="result.discount_amount" readonly></el-input>
                                <span class="company">元</span>
                            </el-col>
                        </el-form-item>
                    </el-form>
                    <!-- 按每十万 -->
                    <el-form label-width="160px" size="small" v-if="calcMode == '1'">
                        <el-form-item label="计息天数">
                            <el-col :span="16" class="parent_block">
                                <el-input v-model="calcResult.day" readonly></el-input>
                                <span class="company">天</span>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="利率">
                            <el-col :span="7">
                                <el-select v-model="selectInterest">
                                    <el-option label="年利率" value="year"></el-option>
                                    <el-option label="月利率" value="month"></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="8" :offset="1" v-if="selectInterest == 'year'" class="parent_block">
                                <el-input type="number" v-model="result.interest_year" readonly></el-input>
                                <span class="company">%</span>
                            </el-col>
                            <el-col :span="8" :offset="1" v-if="selectInterest == 'month'" class="parent_block">
                                <el-input type="number" v-model="result.interest_month" readonly></el-input>
                                <span class="company">‰</span>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="贴现利息">
                            <el-col :span="16" class="parent_block">
                                <el-input v-model="result.discount_interest" readonly></el-input>
                                <span class="company">元</span>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="贴现金额">
                            <el-col :span="16" class="parent_block">
                                <el-input v-model="result.discount_amount" readonly></el-input>
                                <span class="company">元</span>
                            </el-col>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="operation">
            <el-button type="info" size="small" @click="valid(0)">清空</el-button>
            <el-button type="primary" size="small" @click="valid(1)">计算</el-button>
        </div>
    </div>
</template>

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator'
    import moment from 'moment'
    import { dateAdd } from '@/util/format'
    @Component({
        computed:{
            pickerOptions () {
                return {
                    disabledDate:(time) => {
                        return time.getTime() <= this.byRate.start_time
                    }
                }
            },
            pickerOptionsTen () {
                return {
                    disabledDate:(time) => {
                        return time.getTime() <= this.byTen.start_time
                    }
                }
            },
            denomination () {
                
            }
        }
    })
    export default class Calc extends Vue {
        calcMode = '0'//0 按利率；1 按每十万计算
        byRate = {
            denomination: '',//金额
            interest_type: 'year',
            interest: '', //利率
            interest_year: '',
            interest_month: '',
            start_time: new Date(),
            end_time: dateAdd('m',12,new Date()),
            bill_type: '101',
            every_plus: '',//手续费
            commission: '', //查询及划款费
            adjust_day: '',
            adjust_day_model: '',
            holidayModel: {
                isHoliday: '',
                orgescription: '',
                weekName: ''
            }
        }
        byTen = {
            denomination: '',
            every_plus: '',//每十万贴息
            start_time: new Date(),
            end_time: dateAdd('m',12,new Date()),
            bill_type: '101',
            adjust_day: '',
            adjust_day_model: '',
            holidayModel: {
                isHoliday: '',
                orgescription: '',
                weekName: ''
            }
        }
        result = {
            // day: '',
            discount_amount: "",
            discount_interest: "",
            every_plus_amount: "",
            interest_month: '',
            interest_yaer: ''
        }
        calcResult = {
            day: ''
        }
        //系统计算的调整天数
        old_adjustDay = {
            byRate: '',
            byTen: ''
        }
        //rules
        byRateRules = {
            denomination: [
                {required: true, message: '请输入票面金额', trigger: 'blur'}
            ],
            interest_year: [
                {required: true, message: '请输入利率', trigger: 'blur'}
            ],
            start_time: [
                {required: true, message: '请输入贴现日', trigger: 'blur'}
            ],
            end_time: [
                {required: true, message: '请输入到期日', trigger: 'blur'}
            ]
        }
        byTenRules = {
            denomination: [
                {required: true, message: '请输入票面金额', trigger: 'blur'}
            ],
            every_plus: [
                {required: true, message: '请输入每十万贴息', trigger: 'blur'}
            ]
        }
        //按每十万计算结果中的年月利率切换
        selectInterest = 'year'
    //methods
        // pickerOptions = {
        //     start_time: this.byRate.start_time,
        //     disabledDate:(time) => {
        //         return time.getTime() < this.pickerOptions.start_time
        //     }
        // }
        // inputPrice () {
        //     if(Number(this.byRate.denomination) >= 100000){
        //         Vue.set(this.byRate,'denomination',100000)
        //     }
        //     if(Number(this.byTen.denomination) >= 100000){
        //         Vue.set(this.byTen,'denomination',100000)
        //     }
        // }
        //计算计息天数和调整天数
        
        async calcDays () {
            let params = {}
            let url = ''
            if(this.calcMode == '0'){
                params = {
                    start_time: this.byRate.start_time ? moment(this.byRate.start_time).format('YYYY-MM-DD') : '',
                    end_time: this.byRate.end_time ? moment(this.byRate.end_time).format('YYYY-MM-DD') : ''
                }
                url = 'tools/calculator/puls?bill_type='+this.byRate.bill_type
            }else{
                params = {
                    start_time: this.byTen.start_time ? moment(this.byTen.start_time).format('YYYY-MM-DD') : '',
                    end_time: this.byTen.end_time ? moment(this.byTen.end_time).format('YYYY-MM-DD') : ''
                }
                url = 'tools/calculator/puls?bill_type='+this.byTen.bill_type
            }
            let res = await this.$http.put(url,params,{},{loading:false})
            if(res.status == 200){
                this.calcResult.day = res.data.day
                if(this.calcMode == '0'){
                    this.old_adjustDay.byRate = res.data.adjust_day
                    this.byRate.adjust_day_model = res.data.adjust_day
                    this.byRate.holidayModel.isHoliday = res.data.endday.isHoliday
                    this.byRate.holidayModel.orgescription = res.data.endday.orgescription
                    this.byRate.holidayModel.weekName = res.data.endday.weekName
                }else{
                    this.old_adjustDay.byTen = res.data.adjust_day
                    this.byTen.adjust_day_model = res.data.adjust_day
                    this.byTen.holidayModel.isHoliday = res.data.endday.isHoliday
                    this.byTen.holidayModel.orgescription = res.data.endday.orgescription
                    this.byTen.holidayModel.weekName = res.data.endday.weekName
                }
            }
        }
        //切换计算模式
        changeCalcMode () {
            this.calcDays()
            this.valid(0)
        }
        //切换利率类型
        changeRate (item) {
            item == 'year' ? this.byRate.bill_type = '101' : this.byRate.bill_type = '102'
            this.byRate.interest_year = ''
            this.byRate.interest_month = ''
            this.byRate.interest = ''
            this.calcDays()
        }
        //切换票据类型
        changeType (item) {
            item == '101' ? this.byRate.interest_type = 'year' : this.byRate.interest_type = 'month'
            this.byRate.interest_year = ''
            this.byRate.interest_month = ''
            this.byRate.interest = ''
            this.calcDays()
        }
        //更改贴现日
        changeDiscountDay () {
            if((this.calcMode == '0' && this.byRate.start_time) || (this.calcMode == '1' && this.byTen.start_time)){
                this.calcDays()
            }
        }
        //更改到期日
        changeExpireDay () {
            if((this.calcMode == '0' && this.byRate.end_time) || (this.calcMode == '1' && this.byTen.end_time)){
                this.calcDays()
            }
        }
        //计算
        async calcute (byRate,byTen,calcMode) {
            if((!byRate.denomination && calcMode == 0) || (!byTen.denomination && calcMode == 1)){
                this.$alert('请输入票面金额','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            if((Number(byRate.denomination)>100000 && calcMode == 0) || (Number(byTen.denomination)>100000 && calcMode == 1) ){
                this.$alert('票面金额最多为10亿','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            if(calcMode == 0 && !byRate.interest_year && !byRate.interest_month){
                this.$alert('请输入利率','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            if(calcMode == 1 && !byTen.every_plus){
                this.$alert('请输入每十万贴息','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            if(calcMode == 0 && !byRate.start_time){
                this.$alert('请选择贴现日','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            if(calcMode == 0 && !byRate.end_time){
                this.$alert('请选择到期日','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            if((new Date(byRate.end_time) < new Date(byRate.start_time) && calcMode == 0) || (new Date(byTen.end_time) < new Date(byTen.start_time) && calcMode == 1 && byTen.start_time && byTen.end_time)){
                this.$alert('到期日需大于贴现日','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            let form:any = {}
            let url = ''
            byRate.start_time = byRate.start_time ? moment(byRate.start_time).format('YYYY-MM-DD') : ''
            byRate.end_time =  byRate.end_time ? moment(byRate.end_time).format('YYYY-MM-DD') : ''
            byTen.start_time = byTen.start_time ? moment(byTen.start_time).format('YYYY-MM-DD') : ''
            byTen.end_time = byTen.end_time ? moment(byTen.end_time).format('YYYY-MM-DD') : ''
            byRate.interest = byRate.interest_type == 'year' ? byRate.interest_year : byRate.interest_month
            if(calcMode == '0'){
                byRate.adjust_day = Number(this.old_adjustDay.byRate) - byRate.adjust_day_model
                form = {
                    ...byRate
                }
                url = 'tools/calculator'
            }else{
                byTen.adjust_day = Number(this.old_adjustDay.byTen) - byTen.adjust_day_model
                form = {
                    ...byTen
                }
                url = 'tools/calculator?func=ten'
            }
            let res = await this.$http.post(url,form)
            if(res.status == 200){
                this.result = res.data
            }
            // else{
            //     this.$alert(res.msg,'提示',{
            //         confirmButtonText: '确定',
            //         customClass: 'custom-message-box'
            //     })
            // }
        }
        //计算/清空
        valid (mode) {
            if(mode == 1){
                this.calcute(this.byRate,this.byTen,this.calcMode)
            }else{
                this.byRate = {
                    denomination: '',//金额
                    interest_type: 'year',
                    interest: '', //利率
                    interest_year: '',
                    interest_month: '',
                    start_time: new Date(),
                    end_time: dateAdd('m',12,new Date()),
                    bill_type: '101',
                    every_plus: '',//手续费
                    commission: '', //查询及划款费
                    adjust_day: '',
                    adjust_day_model: '',
                    holidayModel: {
                        isHoliday: '',
                        orgescription: '',
                        weekName: ''
                    }
                }
                this.byTen = {
                    denomination: '',
                    every_plus: '',//每十万贴息
                    start_time: new Date(),
                    end_time: dateAdd('m',12,new Date()),
                    bill_type: '101',
                    adjust_day: '',
                    adjust_day_model: '',
                    holidayModel: {
                        isHoliday: '',
                        orgescription: '',
                        weekName: ''
                    }
                }
                this.result = {
                    discount_amount: "",
                    discount_interest: "",
                    every_plus_amount: "",
                    interest_month: "",
                    interest_yaer: ""
                }
                // this.calcResult.day = ''
                this.calcDays()
            }
        }

        mounted () {
            this.calcDays()
        }
    }

</script>

<style lang="scss" scoped>
    .form-container{
        padding: 60px 0;
        width: 1200px;
        margin: 0 auto;
    }
    .row{
        line-height: 36px;
    }
    .mian{
        display: flex;
        margin: 20px 0;
        margin-bottom: 40px;
        .block{
            width: 50%;
        }
    }
    .full-width{
        width: 100% !important;
    }
    .parent_block{
        position: relative;
        .company{
            position: absolute;
            right: 11px;
            top: 0;
        }
    }
    .operation{
        padding-left: 140px;
        .el-button{
            font-size: 14px;
            width: 146px;
        }
    }
    .calc_result{
        // width: 400px !important;
        border: 1px dashed $__color-border;
        border-top: none;
        border-radius: 4px;
        box-sizing: border-box;
        .result_title{
            height: 32px;
            line-height: 32px;
            border-radius: 4px;
            border-left: 4px solid $__color-primary;
            background-color: $__color-bg-primary;
            color: $__color-show;
            font-size: 16px;
            span{
                margin-left: 12px;
            }
        }
        .result_content{
            padding: 34px 0;
        }
    }
</style>
<style lang="scss">
    .result_content{
        .el-input__inner{
            background-color: $__color-bg-primary;
            &:hover{
                border-color: none;
            }
        }
    }
    .block{
        .el-form-item{
            &:last-child{
                margin-bottom: 0;
            }
        }
    }
    .row{
        .el-radio__label{
            font-size: 16px !important;
        }
    }
</style>